<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>组织架构</title>
<link rel="stylesheet" type="text/css" th:href="@{/static/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/static/css/normalize.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/static/org/css/rightCon.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/static/org/css/popUp.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/static/css/thesame.css}"/>
<script th:inline="javascript">var basePath = [[@{/}]];</script>
<style type="text/css">
	/*取消选中效果*/
	div{
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
      user-select:none;
	}
</style>
</head>
<body>
<div class="right-Sidebar-con">
	<article class="mb20px box-shadows bgWhite border-radius5">
		<div onclick="addPop()" class="pad20px"><span class="bgBlue white inline-block border-radius3 pl15px pr15px lh30px"><img th:src="@{/static/org/img/tj.png}" class="mr10px">新  建</span></div>
		<div class="bglightGray organ-list organ-list-top overflow-clear">
			<div>组织名称</div>
			<div>行政机构</div>
			<div>地址</div>
			<div>操作</div>
		</div>
		<nav class="organ-one">
			<ul class="organ-con has-one">
				<li th:each="lv1:${orgListlv1}">
					<div class="organ-list overflow-clear">
						<div class="first-children has-btn" th:attr="data-level=${lv1.org_level},data-id=${lv1.org_id}, data-click=0" onclick="getListData(this)"><span th:if="${lv1.is_child_exist=='1'}" class="first"><img th:src="@{/static/org/img/select_down.png}"></span><em th:text="${lv1.org_name}"></em></div>
						<div><span><img th:src="@{/static/org/img/fz.png}" class="block"></span></div>
						<div>
							<p class="cursor" title="详情" data-container="body" data-toggle="popover" data-placement="bottom"  th:attr="data-content=${lv1.org_address}"><em th:text="${lv1.org_address}"></em></p>
						</div>
						<div class="lightGray"><!-- <span class="blue">编辑</span>|<span class="blue">删除</span> --></div>
					</div>
				</li>
			</ul>
		</nav>
	</article>
	<article id="inputId">
	</article>
</div>

<div id="pop-delete-con-confirm" style="display:none;">
	<div class="popUp">
		<div class="delete-con">
			<ul>
				<li style="font-size: 17px;font-weight: bold;"><img th:src="@{/static/img/tc_icon_xz.png}">是否要删除此数据？</li>
				<li class="f14px mt15px">删除后将无法恢复，请确认是否要删除这条数据</li>
			</ul>
			<div class="btn-con textRight pt15px cursor">
				<div class="inline-block textCenter overflow">
					<p class="confirm-cancel mr20px close-btn">取    消</p>
					<p class="confirm-con">确    定(5)</p>
				</div>
			</div>
		</div>
	</div>
</div> 

<div id="pop-ret-con-fail" style="display:none;">
	<div class="popUp">
		<div class="delete-con">
			<dl class="textCenter">
				<dt><img th:src="@{/static/img/tc_icon_sb.png}"></dt>
				<dd id="pop-ret-con-fail-title" class="pt20px pb20px f18px fb">删除失败</dd>
				<dd id="pop-ret-con-fail-msg" class="red">此组织有下级组织，不能删除该数据</dd>
			</dl>
		</div>
	</div>
</div> 

<div id="pop-ret-con-succ" style="display:none;">
	<div class="popUp">
		<div class="delete-con">
			<dl class="textCenter">
				<dt><img th:src="@{/static/img/tc_icon_cg.png}"></dt>
				<dd id="pop-ret-con-succ-msg" class="pt20px f18px fb">删除成功</dd>
			</dl>
		</div>
	</div>
</div>

<div id="pop-add-con-confirm" style="display:none;">
	<div class="popUp">
		<div class="select-con">
			<h1 class="relative pl15px f16px overflow title-top"><span class="left">新建组织</span><span class="right close-btn"><img th:src="@{/static/img/tc_close.png}"></span></h1>
			<nav class="select-inform pt20px">
				<input type="hidden" id="addOrgId"/>
				<ul>
					<li>
						<p><span class="red">*</span><label>组织名称：</label></p>
						<p><input type="text" id="addOrgName" class="form-control" maxlength="10"  placeholder="请输入组织名称"></p>
					</li>
					<li class="display-flex">
						<div><span class="red">*</span><label>上级组织：</label></div>
						<div>
							<p id="selectParentOrg" class="form-control form-select gray select-click" >请选择</p>
							<nav class="tree-con pad20px border-radius5 box-shadows mt10px mb10px">
								<!-- <div th:each="ao:${addOrgList.children}">
									<p  onclick="addOrgSelect(this);event.cancelBubble =true" class="gray pb10px border-bot" th:attr="data-orgid=${ao.orgId}" th:text="${ao.orgName}"></p>
									<ul class="organ-con add-has-one">
										<li th:each="ao1:${ao.children}">
											<div class="organ-list has-btn overflow-clear">
												<div><span class="first"><img th:src="@{/static/img/arrow_down.png}"></span><em onclick="addOrgSelect(this);event.cancelBubble =true" th:attr="data-orgid=${ao1.orgId}" th:text="${ao1.orgName}"></em></div>
											</div>
											<ul th:if="${ao1.isChildExist=='1'}" class="add-has-two"> 
												<li th:each="ao2:${ao1.children}">
													<div class="organ-list has-btn overflow-clear">
														<div style="width:300px"><span th:if="${ao2.isChildExist=='1'}" class="first"><img th:src="@{/static/img/arrow_down.png}"></span><em onclick="addOrgSelect(this);event.cancelBubble =true" th:attr="data-orgid=${ao2.orgId}" th:text="${ao2.orgName}"></em></div>
													</div>
													<ul th:if="${ao2.isChildExist=='1'}" class="add-has-three"> 
														<li th:each="ao3:${ao2.children}">
															<div class="organ-list has-btn overflow-clear">
																<div style="width:300px"><span th:if="${ao3.isChildExist=='1'}" class="first"><img th:src="@{/static/img/arrow_down.png}"></span><em onclick="addOrgSelect(this);event.cancelBubble =true" th:attr="data-orgid=${ao3.orgId}" th:text="${ao3.orgName}"></em></div>
															</div>
															<ul th:if="${ao3.isChildExist=='1'}" class="add-has-four"> 
																<li th:each="ao4:${ao3.children}">
																	<div class="organ-list has-btn overflow-clear">
																		<div style="width:300px"><em onclick="addOrgSelect(this);event.cancelBubble =true" th:attr="data-orgid=${ao4.orgId}" th:text="${ao4.orgName}"></em></div>
																	</div>
																	<ul th:if="${ao4.isChildExist=='1'}" class="add-has-five">
																		<li th:each="ao5:${ao4.children}">
																			<div class="organ-list has-btn overflow-clear">
																				<div style="width:300px"><span th:if="${ao5.isChildExist=='1'}" class="first"><img th:src="@{/static/plat/img/arrow_down.png}"></span><em onclick="addOrgSelect(this);event.cancelBubble =true" th:attr="data-orgid=${ao5.orgId}" th:text="${ao5.orgName}"></em></div>
																			</div>
																		</li>
																	</ul>
																</li>
															</ul>
														</li>
													</ul> 
												</li>
											</ul>
										</li>
									</ul>
								</div> --> 
							</nav>
						</div>
						
					</li>
					<li>
						<p><label>地址：</label></p>
						<p><input type="text" id="addAddress" class="form-control" placeholder="请输入地址" maxlength="60" autofocus></p>
					</li>
					<li>
						<p><label>行政机构：</label></p>
						<p class="inquire-icheck lh35px">
							<span class="mr15px"><input type="radio" value="1" name="isAdminInstName"/><label for="one" class="ml10px">是</label></span>
							<span class="mr15px"><input type="radio" value="0" checked="checked" name="isAdminInstName"/><label for="three" class="ml10px">否</label></span>
						</p>
					</li>
					<li>
						<p><label>是否显示：</label></p>
						<p class="inquire-icheck lh35px">
							<span class="mr15px"><input type="radio" value="1" checked="checked" name="isShowName"/><label for="one" class="ml10px">是</label></span>
							<span class="mr15px"><input type="radio" value="0" name="isShowName"/><label for="three" class="ml10px">否</label></span>
						</p>
					</li>
				</ul>
				<div class="btn-con textCenter pt15px cursor">
					<div class="inline-block textCenter overflow">
						<p class="confirm-cancel mr20px close-btn">取    消</p>
						<p class="confirm-con add-btn">确    定</p>
					</div>
				</div>
			</nav>
		</div>

	</div>
</div>

<input id="interval-exist" type="hidden"  value="1"/>


<script th:src="@{/static/js/jquery-2.1.3.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<!--组织架构-->
<script type="text/javascript" th:src="@{/static/org/js/orangCon.js}"></script>
<script type="text/javascript" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>

<script>
/**
 * 获取子类机构组织数据
 */
function getListData(obj){
	var level = $(obj).data("level");
	var click =$(obj).data("click");
	if(click==1){
		return;
	}
	level= parseInt(level)+parseInt(1);
	if(level>=6){
		return;
	}
	var OrgId = $(obj).data("id");
	$.ajax({
		type:"post",
		url:basePath+"/org/getListData",
		dataType:"json",			
		data:{"orgLevel":level,"parentOrgId":OrgId},
		success:function(data){
			if(data.code==200){
				var str="";
				if(level==2){
					str+='<ul class="has-two">';
				}else if(level==3){
					str+='<ul class="has-three">';
				}else if(level==4){
					str+='<ul class="has-four">';
				}else if(level==5){
					str+='<ul class="has-five">';
				}
				$.each(data.data,function(index,obj){
					var orgIdNode=$("#reg"+obj.org_id).attr("id");
					var count=obj.count;
					var isAdminInstitute=obj.is_admin_institute;
					if(orgIdNode==null){
						str+='<li data-parentid="'+obj.parent_org_id+'">';
						str+='<div class="organ-list overflow-clear">';
						if(count>0){
							str+='<div id="org'+obj.org_id+'" class="first-children has-btn" data-click="0" data-level="'+obj.org_level+'" data-id="'+obj.org_id+'"  onclick="getListData(this)"><span class="first"><img src="'+basePath+'/static/org/img/select_down.png"></span>'+obj.org_name+'</div>';	
						}else{
							str+='<div id="org'+obj.org_id+'">'+obj.org_name+'</div>';
						}
						if(isAdminInstitute=='1'){
							str+='<div><span><img src="'+basePath+'/static/org/img/fz.png" class="block"></span></div>';
						}else{
							str+='<div><span><img src="'+basePath+'/static/org/img/fz.png" style="visibility :hidden;" class="block"></span></div>';
						}
						str+='<div><p class="cursor" title="详情" data-container="body" data-toggle="popover" data-placement="bottom"  data-content="'+obj.org_address+'">'+obj.org_address+'</em></p></div>';
						str+='<div class="lightGray"><span data-id="'+obj.org_id+'" onclick="editPop(this)" class="blue">编辑</span>|<span data-id="'+obj.org_id+'" onclick="deletePop(this)" class="blue">删除</span></div>';
						str+='</div>';
						str+='</li>';
					}
					
					$("#inputId").append('<input id="reg'+obj.org_id+'" type="hidden"/>');
				});
				str+='</ul>';
				$(obj).parent().parent().append(str);
				//组织架构-地址隐藏内容
				$("[data-toggle='popover']").popover();
				$(obj).data("click","1");	
				//列表组织弹层初始化
				doOrganCon();
			}
			
		}
	})

}

/**
 * 列表组织弹层初始化
 */
function doOrganCon(){
	$('div.has-btn').unbind('click');
    $('div.has-btn').click(function(){
 		var nextArr = $(this).parent().next('').slideToggle(500);
 		$(this).parent().parent().siblings().find('ul').slideUp(500);		     	
	}) 	
}

/**
 * 删除组织机构
 */
function delOrg(orgId){
	$.ajax({
		type:"post",
		url:basePath+"/org/delOrg",
		dataType:"json",		
		async: false,
		data:{"orgId":orgId},
		success:function(data){
			if(data.code==200){
				console.log(data);
				var orgId=data.data.orgId;
				$("#org"+orgId).parent().parent().remove();
				var isParentChildExist=data.data.isParentChildExist;
				if(isParentChildExist==0){
					var parentOrgId=data.data.parentOrgId;
					$("#org"+parentOrgId).find("span").remove();
					$("#org"+parentOrgId).removeAttr("data-click")
										 .removeAttr("data-level")
										 .removeAttr("data-id")
										 .removeAttr("onclick")
										 .removeClass("first-children")
										 .removeClass("has-btn")
										 .unbind('click');
				}
				retSuccPop('删除成功'); 
			}else if(data.code==201){
				retFailPop('删除失败',data.msg);
			}
			
			
		}
	})
	
}

/**
 * 删除弹层
 */
function deletePop(obj){
	var orgId = $(obj).data("id");
    layer.open({
        type: 1  
        ,title: false //不显示标题栏
        ,closeBtn: false
        //是否要删除此数据
        ,area: ['30%', '']
        //新建组织
        //,area: ['40%','']
        ,shade: 0.8
        ,id: 'deletePop' //设定一个id，防止重复弹出
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,shadeClose: false //设置允许点遮罩关闭
        ,content: $("#pop-delete-con-confirm").html(),
        success:function(){
        	//是否要删除此数据
        	$("#interval-exist").val(1);
        	var time=5;
			var code=$(".delete-con .confirm-con");
			code.addClass("msgs");
			code.html("确  定"+"("+time+")");
			var interval=setInterval(function() {
				time--;
				code.html("确  定"+"("+time+")");
				if (time==0) {
					clearInterval(interval);
					code.html("确  定");
					code.removeClass("msgs");
					code.attr("onclick","delOrg("+orgId+")");
				}
			},1000)
			//关闭弹层
			$(".close-btn").click(function(e){
				var code=$(".delete-con .confirm-con");
				code.html("确    定(5)");
				clearInterval(interval);
				interval=null;
				var code=$(".delete-con .confirm-con");
				code.removeAttr("onclick");
				layer.closeAll();
			});
        },
        
    });
  }

/**
 * 提示失败
 */
function retFailPop(title, msg){
	$("#pop-ret-con-fail-title").html(title);
	$("#pop-ret-con-fail-msg").html(msg);
	layer.closeAll();
	layer.open({
        type: 1  
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: ['25%', '']
        ,shade: 0.8
        ,id: 'deleteFailPop' //设定一个id，防止重复弹出
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,shadeClose: true //设置允许点遮罩关闭
        ,content: $("#pop-ret-con-fail").html(),
        success:function(){
        },
        
    });
  }
  
/**
 * 提示成功
 */
function retSuccPop(msg){
	$("#pop-ret-con-succ-msg").html(msg);
	layer.closeAll();
	layer.open({
        type: 1  
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: ['25%', '']
        ,shade: 0.8
        ,id: 'deleteSuccPop' //设定一个id，防止重复弹出
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,shadeClose: true //设置允许点遮罩关闭
        ,content: $("#pop-ret-con-succ").html(),
        success:function(){
        	if(msg=='添加成功'){
        		setTimeout(function(){ window.location.href=basePath+"/org/listPage" }, 1000);
        	}
        	if(msg=='修改成功'){
        		setTimeout(function(){ window.location.href=basePath+"/org/listPage" }, 1000);
        	}
        },
        
    });
  }

/**
 * 添加组织机构
 */
function addPop(){
	//layer.closeAll();
	layer.open({
        type: 1  
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: ['50%', '80%']
        ,shade: 0.6
        ,id: 'addPop' //设定一个id，防止重复弹出
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,shadeClose: true //设置允许点遮罩关闭
        ,content: $("#pop-add-con-confirm"),
        success:function(){
        	//组织架构添加弹层初始化
        	addOrgInit();
        },
        
    });
}

/**
 * 添加选择机构-机构
 */
function addOrgSelect(obj){
	var name = $(obj).html();
	var orgId = $(obj).data("orgid");	
	$("#selectParentOrg").html(name);
	$("#selectParentOrg").data("orgid",orgId);
	$('.add-has-one ul').hide();
	$('.tree-con').slideUp(500);
}

/**
 * 添加组织弹层初始化
 */
function addOrgInit(){
	//清空所有填写选择和点击触发
	$('.tree-con div.has-btn .first, .deploy-fold div.has-btn').unbind('click');
	$('.select-click').unbind('click');
	$('.add-btn').unbind('click');
	$("#addOrgId").val(null);
	$("#selectParentOrg").html("请选择");
	$("#selectParentOrg").removeData("orgid");
	$("#addOrgName").html("").val(null);
	$("#addAddress").html("").val(null);
	$('input[name=isAdminInstName]:first').removeAttr('checked');
	$('input[name=isAdminInstName]:last').prop("checked", true);
	$('input[name=isShowName]:first').prop("checked", true);
	$('input[name=isShowName]:last').removeAttr('checked');
	
	$.ajax({
		type:"post",
		url:basePath+"/org/getAllOrg",
		dataType:"json",		
		success:function(data){
			var str="";
			$.each(data.children,function(index,ao){
				str+='<p onclick="addOrgSelect(this);event.cancelBubble =true" class="gray pb10px border-bot" data-orgid="'+ao.orgId+'">'+ao.orgName+'</p>';
				if(ao.isChildExist=='1' && data.children!=null && data.children.length>0){
					str+='<ul class="organ-con add-has-one">';
					$.each(ao.children,function(index,ao1){
						str+='<li>';
						str+='<div class="organ-list has-btn overflow-clear">';
						str+='<div style="width:300px"><span class="first"><img src="'+basePath+'/static/img/arrow_down.png"></span><em onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao1.orgId+'">'+ao1.orgName+'</em></div>';
						str+='</div>';
						if(ao1.isChildExist=='1' && ao.children!=null && ao.children.length>0){
							str+='<ul class="organ-con add-has-two">';
							$.each(ao1.children,function(index,ao2){
								str+='<li>';
								str+='<div class="organ-list has-btn overflow-clear">';
								str+='<div style="width:300px">';
								if(ao2.isChildExist=='1'){
									str+='<span class="first"><img src="'+basePath+'/static/img/arrow_down.png"></span>';
								}
								str+='<em onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao2.orgId+'">'+ao2.orgName+'</em>';
								str+='</div>'
								str+='</div>';
								if(ao2.isChildExist=='1' && ao2.children!=null && ao2.children.length>0){
									str+='<ul class="organ-con add-has-three">';
									$.each(ao2.children,function(index,ao3){
										str+='<li>';
										str+='<div class="organ-list has-btn overflow-clear">';
										str+='<div style="width:300px">';
										if(ao3.isChildExist=='1'){
											str+='<span class="first"><img src="'+basePath+'/static/img/arrow_down.png"></span>';
										}
										str+='<em onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao3.orgId+'">'+ao3.orgName+'</em>';
										str+='</div>'
										str+='</div>';
										if(ao3.isChildExist=='1' && ao3.children!=null && ao3.children.length>0){
											str+='<ul class="organ-con add-has-four">';
											$.each(ao3.children,function(index,ao4){
												str+='<li>';
												str+='<div class="organ-list has-btn overflow-clear">';
												str+='<div style="width:300px">';
												if(ao4.isChildExist=='1' && ao3.children!=null && ao4.children.length>0){
													str+='<span class="first"><img src="'+basePath+'/static/img/arrow_down.png"></span>';
												}
												str+='<em onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao4.orgId+'">'+ao4.orgName+'</em>';
												str+='</div>'
												str+='</div>';
												str+='</li>';
											})
											str+='</ul>'
										}
										str+='</li>';
									})
									str+='</ul>';
								}
								str+='</li>';
							})	
							str+='</ul>';
						}
						str+='</li>';
					});
					str+='</ul>';
				}
				str+='';
				
				
			});
			$(".tree-con").html(str);
			$('.tree-con div.has-btn .first, .deploy-fold div.has-btn').click(function(){
				$(this).parent().parent().next('').slideToggle(300);
				$(this).parent().parent().parent().siblings().find('ul').slideUp(300);
				
				if( $(this).find('span.first img').attr('src') == basePath+'/static/img/arrow_down.png'){
					$(this).find('span.first img').attr('src',basePath+'/static/img/arrow_up.png')
					$(this).parent().siblings().find('span.orange img').attr('src',basePath+'/static/img/arrow_down.png')
				}
				else{
					$(this).find('span.first img').attr('src',basePath+'/static/img/arrow_down.png')
				}
			})	 
			
			$('.tree-con').hide();
			$('.add-has-one ul').hide();
			$('.select-click').click(function(){
				$('.tree-con').slideToggle();
			})
			
			$(".close-btn").click(function(){
				layer.closeAll();	
			});
			
		}
	})
	
    
}

/**
 * 修改组织机构
 */
function editPop(obj){
	//组织架构添加弹层初始化
	addOrgInit();
	var orgId=$(obj).data("id");
	layer.open({
        type: 1  
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: ['50%', '68%']
        ,shade: 0.8
        ,id: 'addPop' //设定一个id，防止重复弹出
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,shadeClose: true //设置允许点遮罩关闭
        ,content: $("#pop-add-con-confirm"),
        success:function(){      
        	$.ajax({
        		type:"post",
        		url:basePath+"/org/getOrg",
        		dataType:"json",		
        		data:{"orgId":orgId},
        		success:function(data){
        			console.log(data.data);
        			var org=data.data;
        			$("#addOrgId").val(org.orgId);
        			$("#addOrgName").val(org.orgName);
        			$("#addAddress").val(org.orgAddress);
        			$("#selectParentOrg").html(data.msg);
        			$("#selectParentOrg").data("orgid",org.parentOrgId);
        			var iainArr = $('input[name=isAdminInstName]');
        			for(var i=0;i<iainArr.length;i++){
        				if($(iainArr[i]).val()==org.isAdminInstitute){
        					$(iainArr[i]).prop("checked", true);
        				}else{
        					$(iainArr[i]).removeAttr("checked");
        				}
        			}
        			var isArr = $('input[name=isShowName]');
        			for(var i=0;i<isArr.length;i++){
        				if($(isArr[i]).val()==org.isShow){
        					$(isArr[i]).prop("checked", true);
        				}else{
        					$(isArr[i]).removeAttr("checked");
        				}
        			}
        		}
        	})
        	
        },
        
    });
}

/**
 * 判断是否空
 */
function isNull(value) {
    return value == null || value === "" || value === undefined;
}

</script>

</body>
</html>
    
 